<template>
  <div class="search-page">
    <!--<headBar class="head flex">-->
      <!--<div slot="xm-header-center" class="search flex-1 flex flex-align-center">-->
        <!--<input type="text" placeholder="输入商品名称" v-model="keyword">-->
        <!--<i class="icon icon-search"></i>-->
      <!--</div>-->
      <!--<div slot="xm-header-right">-->
        <!--<div class="btn search-btn" @click="clickSearch(keyword)">-->
          <!--搜索-->
        <!--</div>-->
      <!--</div>-->
    <!--</headBar>-->
    <section class="flex search-head">
      <i class="clear" onclick="history.back()"></i>
      <i class="icon icon-search"></i>
      <input class="flex-1" placeholder="搜索商品名、条码、品牌" v-model="keyword">
      <i class="icon clear min" @click="keyword=''"></i>
      <span class="search-btn" @click="clickSearch(keyword)">搜索</span>
    </section>
    <section class="search-group hot">
      <div class="tit">热门搜索</div>
      <div class="item" v-for="item in hotWordList" @click="clickSearch(item.word)">{{item.word}}</div>

      <!--<div class="text-center no-content" v-show="!hasWordList"><i class="icon icon-fa-headphones"></i> 没有热门搜索内容</div>-->
    </section>
    <section class="search-group history">
      <div class="tit flex flex-pack-justify">
        <span>历史搜索</span>
        <i class="clear" @click="clearHistory"> 清空历史数据</i>
      </div>
      <div class="item" v-for="item in historySearchList" @click="clickSearch(item.keyword)">{{item.keyword}}</div>
      <!--<div class="text-center no-content" v-show="!hasSearchList"><i class="icon icon-fa-headphones"></i> 没有历史搜索内容</div>-->
    </section>

  </div>
</template>
<script>
  export default {
    props: {},
    data() {
      return {
        keyword: '',
        historySearchList: [],
        hotWordList: []
      };
    },
    methods: {
      // 获取搜索页数据
      getSearchData(){
        getSearchData().then(data=>{
          if(data.returnCode == '000000'){
            this.historySearchList = data.result.historySearchList;
            this.hotWordList = data.result.hotWordList;
          }
        })
      },
        /**
         * 清空历史记录
         * */
        clearHistory(){
            clearHistory().then(data=>{
                if(data.returnCode == '000000'){
                    this.getSearchData();
                }
            });

        },
      //点击搜索
      clickSearch(keyword){
        this.$router.push({name: 'goodsListWareName', params: {wareName: keyword || ' '}});
      }
    },
    filters: {},
    created() {
      this.getSearchData();

    },
    watch:{
      keyword: function(newValue, oldValue){
        this.keyword = newValue.substring(0,20);
      }
    },
    mounted(){

    },
    components: {
    }
  };
</script>
<style lang="less">
  @import "./search.less";
</style>
